<!--
 * @Description: 该文件描述
 * @FilePath: \fortune_h5\src\modules\home\views\result.vue
 * @Author: Brian Brian@gmail.com
 * @Date: 2024-10-29 08:58:14
 * @LastEditors: Brian wxcn@gmail.com
 * @LastEditTime: 2024-11-07 09:39:34
-->
<script setup lang="ts">
import { useRouter } from "vue-router";
import fh from "../static/svgs/fh.svg";
import fx from "../static/svgs/fx.svg";
import { FortuneByName } from "@/api/toolsService";
import { ref, onUnmounted, shallowRef, computed, onMounted } from "vue";
import { showFailToast, Swipe, SwipeItem } from "vant";
import { sleep, storageLocal } from "@wxcn/utils";
import { fiveElementColor, fiveGeArr, JX, monthColor } from "./const";
import html2canvas from "html2canvas";
const { codeUrl } = window.globalConfig;
const router = useRouter();
const loading = ref(false);
const showShare = ref(false);
const shareImg1 = ref<string | undefined>(undefined);
const shareImg2 = ref<string | undefined>(undefined);
const params = storageLocal.getItem("params");

const resData = shallowRef({} as ResData<typeof FortuneByName>);
const getFortuneByName = async () => {
  loading.value = true;
  try {
    resData.value = await FortuneByName(params);
  } catch (error) {
    showFailToast("测算失败，请稍后再试");
    await sleep(2000);
    router.back();
  } finally {
    loading.value = false;
  }
};
getFortuneByName();

const jxFn = (
  text: string,
  type: "m" | "l" = "m"
): Array<Record<string, string>> => {
  if (!text) return [];
  if (text === "半凶半吉") {
    return type === "m"
      ? []
      : [
          { text: "半", class: `x2_${type}` },
          { text: "凶", class: `x2_${type}` },
          { text: "半", class: `j2_${type}` },
          { text: "吉", class: `j2_${type}` },
        ];
  }
  if (text === "半吉半凶") {
    return type === "m"
      ? []
      : [
          { text: "半", class: `j2_${type}` },
          { text: "吉", class: `j2_${type}` },
          { text: "半", class: `x2_${type}` },
          { text: "凶", class: `x2_${type}` },
        ];
  }
  return text
    .split("")
    .map(item => {
      return type === "m" && text.includes("凶")
        ? null
        : {
            text: item,
            class: `${text.includes("吉") ? "j1" : "x1"}_${type}`,
          };
    })
    .filter(Boolean) as [];
};
const fiveElementColorFn = (count: number) => {
  if (!count) return "#fff";
  let key = "";
  if (count > 9) key = count.toString().slice(-1);
  else key = count.toString();
  return fiveElementColor[key];
};
const computedJI = computed(() => {
  if (!resData.value?.Di) return {};
  const obj = fiveGeArr
    .reduce((init, { label, key }) => {
      const jx = resData.value[key].Comments[1];
      init.push({ label, jx: jx.split(""), num: JX[jx as any] });
      return init;
    }, [] as any)
    .sort((a: any, b: any) => a.num - b.num)[0];

  if (obj.jx.includes("吉")) return obj;
  else return {};
});
onUnmounted(() => {
  storageLocal.removeItem("params");
});
const showShareHandler = () => {
  showShare.value = true;
};
const closeShareHandler = () => {
  showShare.value = false;
};
const createShareImg = async (id: string) => {
  if (loading.value) {
    await sleep(10);
    createShareImg(id);
    return;
  }
  const ele = document.querySelector(id) as HTMLElement;

  html2canvas(ele, {
    useCORS: true,
    scale: window.devicePixelRatio,
    allowTaint: false, //允许污染
    backgroundColor: null, // 解决生成的图片有白边
  }).then(canvas => {
    if (id === "#share1") {
      shareImg1.value = canvas.toDataURL("image/png");
    } else {
      shareImg2.value = canvas.toDataURL("image/png");
    }
  });
};
onMounted(() => {
  if (!params) {
    router.push("/");
    return;
  }
  createShareImg("#share1");
  createShareImg("#share2");
});
</script>

<template>
  <div class="wrap fx-column px14 pb20">
    <div class="fx-j-sb fx-a-c h60 fx-shrink0">
      <div class="fx-a-c fs20 fc-main" @click="router.back">
        <img :src="fh" alt="" />
        返回
      </div>
      <div @click="showShareHandler">
        <img :src="fx" alt="" />
      </div>
    </div>
    <!--  页面 -->
    <div class="container br1-main">
      <img
        v-for="item in 4"
        :key="item"
        src="../static/svgs/bj.svg"
        class="bj"
      />
      <div class="content">
        <!-- 标题 -->
        <div class="fx bg h32 mx44 px20 fs20 fc-main">
          <div class="w30% fx-cc brr1-main">{{ params.sex }}造</div>
          <div class="w70% fx-cc gap6 pl12">
            <span> 月建 {{ params.month }}{{ params.day }} </span>
            <span :style="{ color: monthColor?.[resData.MonthDizhi] }">
              {{ resData.MonthDizhi }}
            </span>
            <span :style="{ color: monthColor?.[resData.MonthDizhi] }">
              {{ resData.MonthFiveElement }}
            </span>
          </div>
        </div>
        <!-- 姓名 -->
        <ul class="fx pt20 px20 fc-main fs20">
          <li class="w20% fx-cc fx-column gap10">
            <div>外格</div>
            <div
              :style="{ color: fiveElementColorFn(resData.Wai?.StrokeCount) }"
            >
              {{ resData.Wai?.StrokeCount }}
            </div>
            <div
              :style="{ color: fiveElementColorFn(resData.Wai?.StrokeCount) }"
            >
              ({{ resData.Wai?.FiveElement }})
            </div>
            <div
              v-for="(item, index) in jxFn(resData.Wai?.Comments[1], 'm')"
              :key="index"
              :class="item.class"
            >
              {{ item.text }}
            </div>
          </li>
          <li class="name fx1 px20 fx-column gap10">
            <div v-for="(item, index) in resData.Words" :key="index" class="fx">
              <div class="brd8 w54 h54 fx-cc br1-main fs40 mr20">
                <span :style="{ opacity: resData.Words?.[index] ? 1 : 0.15 }">
                  {{ item || (index ? "名" : "姓") }}
                </span>
              </div>
              <div
                class="w54 h54 fs38 fx-cc"
                :style="{ opacity: resData.Words?.[index] ? 1 : 0.15 }"
              >
                {{ resData.WordStrokeCounts?.[index] }}
              </div>
            </div>
          </li>
          <li class="w30% fx-column fx-j-c">
            <div
              v-for="(v, i) in fiveGeArr.slice(0, 3)"
              :key="i"
              class="fx2 fx"
            >
              <!-- 三格 -->
              <div class="fx2 fx-cc fx-column gap6">
                <div>{{ v.label }}</div>
                <div
                  class="fs16"
                  :style="{
                    color: fiveElementColorFn(resData[v.key]?.StrokeCount),
                  }"
                >
                  {{ resData[v.key]?.StrokeCount }}({{
                    resData[v.key]?.FiveElement
                  }})
                </div>
              </div>
              <!-- 吉凶 -->
              <div class="fx1 fx-column fx-cc gap2">
                <div
                  v-for="(item, index) in jxFn(
                    resData[v.key]?.Comments[1],
                    'm'
                  )"
                  :key="index"
                  :class="item.class"
                >
                  {{ item.text }}
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- 总格 -->
        <div
          class="zong_ge fx-j-c fx-a-c gap14 mt10 pt26 pb16 brb1-main mx24 fs20 fc-main"
        >
          <div class="fx gap2">
            <div
              v-for="(item, index) in jxFn(resData.Zong?.Comments[1], 'l')"
              :key="index"
              :class="item.class"
            >
              {{ item.text }}
            </div>
          </div>
          <div>总 格</div>
          <div
            :style="{ color: fiveElementColorFn(resData.Zong?.StrokeCount) }"
          >
            {{ resData.Zong?.StrokeCount }} ({{ resData.Zong?.FiveElement }})
          </div>
        </div>
        <!-- 解释 -->
        <ul class="px40 fc-main py20">
          <li
            v-for="(item, index) in fiveGeArr"
            :key="index"
            class="fx-a-c py15"
          >
            <div class="fx1">
              <div class="fx-a-c gap10 fs20">
                <span>{{ item.label }}</span>
                <span>{{ resData[item.key]?.StrokeCount }}</span>
                <div class="fx gap4">
                  <div
                    v-for="(v, index) in jxFn(
                      resData[item.key]?.Comments[1],
                      'l'
                    )"
                    :key="index"
                    :class="v.class"
                  >
                    {{ v.text }}
                  </div>
                </div>
              </div>
              <div class="fs18 mt8">
                {{ resData[item.key]?.Comments[0] }}
              </div>
            </div>
            <div
              class="fs20 fc-fff brd100 p9"
              :style="{
                backgroundColor: fiveElementColorFn(
                  resData[item.key]?.StrokeCount
                ),
              }"
            >
              {{ resData[item.key]?.FiveElement }}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="loading" class="loading">
      <img src="../static/imgs/loading.png" alt="" />
    </div>
  </div>
  <!--  分享 1 显示名字 -->
  <div id="share1" class="share br1-main pb30">
    <img v-for="item in 4" :key="item" src="../static/svgs/bj.svg" class="bj" />
    <div class="pt30">
      <!-- 标题 -->
      <div class="bg fx-j-c h32 mx60 fs22 fc-main fw600">我的姓名</div>
      <div v-if="computedJI.jx">
        <ul class="fx-j-c gap10 mt20 shareJX">
          <li v-for="(item, index) in computedJI.jx" :key="index">
            {{ item }}
          </li>
        </ul>
        <div class="fx-j-c fc-main">{{ computedJI.label }}</div>
      </div>
      <div class="xm m25 py14 brd8">
        <!-- 姓名 -->
        <ul class="fx px10 fc-main fs16">
          <li class="w26% fx-cc fx-column gap10">
            <div>外格</div>
            <div
              :style="{ color: fiveElementColorFn(resData.Wai?.StrokeCount) }"
            >
              {{ resData.Wai?.StrokeCount }}
            </div>
            <div
              :style="{ color: fiveElementColorFn(resData.Wai?.StrokeCount) }"
            >
              ({{ resData.Wai?.FiveElement }})
            </div>
            <div
              v-for="(item, index) in jxFn(resData.Wai?.Comments[1], 'm')"
              :key="index"
              :class="item.class"
              class="h18 w18"
            >
              <div style="margin-top: -4px">{{ item.text }}</div>
            </div>
          </li>
          <li class="name fx1 px20 fx-column gap10">
            <div v-for="(item, index) in resData.Words" :key="index" class="fx">
              <div class="brd8 w32 h32 fx-j-c br1-main fs20 mr20">
                <span :style="{ opacity: resData.Words?.[index] ? 1 : 0.15 }">
                  {{ item || (index ? "名" : "姓") }}
                </span>
              </div>
              <div
                class="w32 h32 fs22 fx-cc"
                :style="{ opacity: resData.Words?.[index] ? 1 : 0.15 }"
              >
                {{ resData.WordStrokeCounts?.[index] }}
              </div>
            </div>
          </li>
          <li class="w46% fx-column fx-j-c">
            <div
              v-for="(v, i) in fiveGeArr.slice(0, 3)"
              :key="i"
              class="fx2 fx"
            >
              <!-- 三格 -->
              <div class="fx2 fx-cc fx-column gap6">
                <div>{{ v.label }}</div>
                <div
                  class="fs16"
                  :style="{
                    color: fiveElementColorFn(resData[v.key]?.StrokeCount),
                  }"
                >
                  {{ resData[v.key]?.StrokeCount }}({{
                    resData[v.key]?.FiveElement
                  }})
                </div>
              </div>
              <!-- 吉凶 -->
              <div class="fx1 fx-column fx-cc gap2">
                <div
                  v-for="(item, index) in jxFn(
                    resData[v.key]?.Comments[1],
                    'm'
                  )"
                  :key="index"
                  :class="item.class"
                  class="h18 w18"
                >
                  <div style="margin-top: -4px">{{ item.text }}</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- 总格 -->
        <div
          class="fx-j-c fx-a-c py6 gap14 brb1-main brt1-main mx18 mt10 fs16 fc-main"
        >
          <div class="fx gap2">
            <div
              v-for="(item, index) in jxFn(resData.Zong?.Comments[1], 'm')"
              :key="index"
              :class="item.class"
              class="w18 h18"
            >
              <div style="margin-top: -4px">{{ item.text }}</div>
            </div>
          </div>
          <div><div style="margin-top: -6px">总 格</div></div>
          <div
            :style="{ color: fiveElementColorFn(resData.Zong?.StrokeCount) }"
          >
            <div style="margin-top: -6px">
              {{ resData.Zong?.StrokeCount }} ({{ resData.Zong?.FiveElement }})
            </div>
          </div>
        </div>
      </div>
      <div class="fx-cc">
        <img :src="codeUrl" class="w100 h100" />
      </div>
      <div class="fs20 fc-main mt20 fx-j-c fw600">测测您的尊姓大名</div>
    </div>
  </div>

  <!--  分享 2 隐藏名字 -->
  <div id="share2" class="share br1-main pb30">
    <img v-for="item in 4" :key="item" src="../static/svgs/bj.svg" class="bj" />
    <div class="pt30">
      <!-- 标题 -->
      <div class="bg fx-j-c h32 mx60 fs22 fc-main fw600">我的姓名</div>
      <div v-if="computedJI.jx">
        <ul class="fx-j-c gap10 mt20 shareJX">
          <li v-for="(item, index) in computedJI.jx" :key="index">
            {{ item }}
          </li>
        </ul>
        <div class="fx-j-c fc-main">{{ computedJI.label }}</div>
      </div>
      <div class="xm m25 py14 brd8">
        <!-- 姓名 -->
        <ul class="fx px10 fc-main fs16">
          <li class="w26% fx-cc fx-column gap10">
            <div>外格</div>
            <div
              :style="{ color: fiveElementColorFn(resData.Wai?.StrokeCount) }"
            >
              {{ resData.Wai?.StrokeCount }}
            </div>
            <div
              :style="{ color: fiveElementColorFn(resData.Wai?.StrokeCount) }"
            >
              ({{ resData.Wai?.FiveElement }})
            </div>
            <div
              v-for="(item, index) in jxFn(resData.Wai?.Comments[1], 'm')"
              :key="index"
              :class="item.class"
              class="h18 w18"
            >
              <div style="margin-top: -4px">{{ item.text }}</div>
            </div>
          </li>
          <li class="name fx1 px20 fx-column gap10">
            <div v-for="(item, index) in resData.Words" :key="index" class="fx">
              <div class="brd8 w32 h32 fx-j-c br1-main fs20 mr20">
                <span v-if="index === 0" :style="{ opacity: item ? 1 : 0.15 }">
                  {{ item ? item : "姓" }}
                </span>
                <span v-else-if="index === 1"> {{ item }} </span>
                <span v-else-if="index === 2"> # </span>
                <span v-else :style="{ opacity: item ? 1 : 0.15 }">
                  {{ item ? "#" : "名" }}
                </span>
              </div>
              <div
                class="w32 h32 fs22 fx-cc"
                :style="{ opacity: resData.Words?.[index] ? 1 : 0.15 }"
              >
                {{ resData.WordStrokeCounts?.[index] }}
              </div>
            </div>
          </li>
          <li class="w46% fx-column fx-j-c">
            <div
              v-for="(v, i) in fiveGeArr.slice(0, 3)"
              :key="i"
              class="fx2 fx"
            >
              <!-- 三格 -->
              <div class="fx2 fx-cc fx-column gap6">
                <div>{{ v.label }}</div>
                <div
                  class="fs16"
                  :style="{
                    color: fiveElementColorFn(resData[v.key]?.StrokeCount),
                  }"
                >
                  {{ resData[v.key]?.StrokeCount }}({{
                    resData[v.key]?.FiveElement
                  }})
                </div>
              </div>
              <!-- 吉凶 -->
              <div class="fx1 fx-column fx-cc gap2">
                <div
                  v-for="(item, index) in jxFn(
                    resData[v.key]?.Comments[1],
                    'm'
                  )"
                  :key="index"
                  :class="item.class"
                  class="h18 w18"
                >
                  <div style="margin-top: -4px">{{ item.text }}</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- 总格 -->
        <div
          class="fx-j-c fx-a-c py6 gap14 brb1-main brt1-main mx18 mt10 fs16 fc-main"
        >
          <div class="fx gap2">
            <div
              v-for="(item, index) in jxFn(resData.Zong?.Comments[1], 'm')"
              :key="index"
              :class="item.class"
              class="w18 h18"
            >
              <div style="margin-top: -4px">{{ item.text }}</div>
            </div>
          </div>
          <div><div style="margin-top: -6px">总 格</div></div>
          <div
            :style="{ color: fiveElementColorFn(resData.Zong?.StrokeCount) }"
          >
            <div style="margin-top: -6px">
              {{ resData.Zong?.StrokeCount }} ({{ resData.Zong?.FiveElement }})
            </div>
          </div>
        </div>
      </div>
      <div class="fx-cc">
        <img :src="codeUrl" class="w100 h100" />
      </div>
      <div class="fs20 fc-main mt20 fx-j-c fw600">测测您的尊姓大名</div>
    </div>
  </div>

  <!--  分享 轮播图 -->
  <div
    v-if="showShare"
    class="popupImg px40 fx-cc fx-column"
    @click="closeShareHandler"
  >
    <Swipe class="my-swipe">
      <SwipeItem><img :src="shareImg1" alt="" /></SwipeItem>
      <SwipeItem><img :src="shareImg2" alt="" /></SwipeItem>
    </Swipe>
    <br />
    <div class="fx-cc fc-fff">长按图片保存</div>
  </div>
</template>

<style lang="scss" scoped>
@import "./index.scss";

.popupImg {
  width: 100vw;
  height: 100vh;
  background-color: rgba($color: #000000, $alpha: 0.8);
  position: fixed;
  top: 0;
  left: 0;
  .my-swipe {
    width: 100%;
    :deep(.van-swipe-item) {
      img {
        width: 100%;
        height: auto;
      }
    }
    :deep(.van-swipe__indicator) {
      background-color: #000 !important;
    }
    :deep(.van-swipe__indicator--active) {
      background-color: #75292c !important;
    }
  }
}

.bg {
  background-image: url(../static/imgs/text_bg.png);
  background-size: 100% 100%;
}
.loading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba($color: #000000, $alpha: 0.8);
  img {
    position: absolute;
    width: 180px;
    height: 180px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); // 旋转动画
    animation: rotate 2s linear infinite;
    @keyframes rotate {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }
  }
}
.wrap {
  height: 100vh;
  width: 100%;
  background-image: url(../static/imgs/result_bg.png);
  background-size: cover;
}
.bj {
  position: absolute;
  &:nth-of-type(1) {
    top: 10px;
    left: 10px;
  }
  &:nth-of-type(2) {
    top: 10px;
    right: 10px;
    transform: rotate(90deg);
  }
  &:nth-of-type(3) {
    bottom: 10px;
    left: 10px;
    transform: rotate(270deg);
  }
  &:nth-of-type(4) {
    bottom: 10px;
    right: 10px;
    transform: rotate(180deg);
  }
}
.container,
.share {
  ul {
    li.name {
      background:
        url(../static/imgs/x1.png) no-repeat left / 10px 86%,
        url(../static/imgs/x2.png) no-repeat right 14px / 10px 24%,
        url(../static/imgs/x2.png) no-repeat right / 10px 24%,
        url(../static/imgs/x2.png) no-repeat right calc(100% - 10px) / 10px 24%;

      > div {
        > div {
          background-image: url(../static/imgs/m.png);
          background-size: 100% 100%;
        }
      }
    }
  }
}
.container {
  position: relative;
  height: calc(100vh - 80px);
  .content {
    height: calc(100% - 60px);
    margin-top: 30px;
    overflow-y: scroll;
    .zong_ge {
      background: url(../static/imgs/x3.png) no-repeat top/76% 10px;
    }
  }
}
.share {
  background-image: url(../static/imgs/result_bg.png);
  background-size: cover;
  width: 100vw;
  position: fixed;
  top: 60px;
  left: -2000px;
  vertical-align: top;
  .shareJX {
    li {
      font-size: 46px;
      width: 80px;
      height: 80px;
      padding-top: 12px;
      padding-left: 12px;
      color: #fff;
      background: url(../static/svgs/j_1.svg) no-repeat top / 100% 100%;
    }
  }
  .xm {
    background-color: #f5ecc6;
  }
}
.relative {
  position: relative;
}
.center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>
